<template>
  <div class="JJTable">
    <!-- Table search component -->
    <div class="TableSearchContainer">
      <JJTableSearch v-if="showSearch" :search-options="tableOptions.searchOptions" />
    </div>

    <!-- Main table -->
    <div class="TableContainer">
      <div class="OptionArea">
        <div class="DataOptions">
          <!-- Add row btn -->
          <el-button
            v-if="tableOptions.dataOptions.addRow"
            type="primary"
            :icon="tableOptions.dataOptions.addRow.icon"
            @click="tableOptions.dataOptions.addRow.cb"
            >{{ tableOptions.dataOptions.addRow.label }}</el-button
          >

          <!-- Add row(s) btn -->
          <el-button
            v-if="tableOptions.dataOptions.delRow"
            type="danger"
            plain
            :icon="tableOptions.dataOptions.delRow.icon"
            @click="tableOptions.dataOptions.delRow.cb(selectedRows)"
            >{{ tableOptions.dataOptions.delRow.label }}</el-button
          >
        </div>

        <div class="TableOptions">
          <el-button icon="el-icon-refresh" circle></el-button>
          <el-button icon="el-icon-s-operation" circle @click="showColumnSetting = !showColumnSetting"></el-button>
          <el-button icon="el-icon-search" :type="showSearch ? 'primary' : ''" circle @click="showSearch = !showSearch"></el-button>
        </div>
      </div>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        @selection-change="selectionChangeHandle"
      >
        <el-table-column type="selection" width="60" align="center"> </el-table-column>
        <el-table-column type="index" label="#" align="center"> </el-table-column>

        <!-- Custom column -->
        <el-table-column
          v-for="ck in Object.keys(tableOptions.column)"
          :key="ck"
          :prop="ck"
          :label="tableOptions.column[ck].label"
          :width="tableOptions.column[ck].width"
          :show-overflow-tooltip="tableOptions.column[ck].showTip"
          :align="tableOptions.column[ck].align"
        ></el-table-column>

        <!-- Row options -->
        <el-table-column label="Options" :width="tableOptions.rowOptionWidth" align="center">
          <template slot-scope="scope">
            <el-row :gutter="16" type="flex">
              <template v-for="o in tableOptions.rowoptions">
                <!-- Confirm option -->
                <el-col v-if="o.confirmTitle">
                  <el-popconfirm
                    :title="o.confirmTitle"
                    :confirm-button-text="'Yes'"
                    :cancel-button-text="'Cancel'"
                    @confirm="o.cb(scope.$index, scope.row)"
                  >
                    <el-button type="text" slot="reference" :icon="o.icon" style="padding: 0">{{ o.label }}</el-button>
                  </el-popconfirm>
                </el-col>

                <!-- Common option -->
                <el-col v-else>
                  <el-button type="text" :icon="o.icon" @click="o.cb(scope.$index, scope.row)" style="padding: 0">{{ o.label }}</el-button>
                </el-col>
              </template>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- Table pagination-->
    <div class="TablePagination" v-if="tableData.length > tableOptions.pagination.pageSize">
      <el-pagination
        @size-change="tableOptions.pagination.sizeChange"
        @current-change="tableOptions.pagination.currentPageChange"
        :current-page.sync="tableOptions.pagination.currentPage"
        :page-size="tableOptions.pagination.pageSize"
        layout="total, prev, pager, next"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

    <!-- Table column setting drawer -->
    <el-drawer :visible.sync="showColumnSetting" class="ColumnSettingDrawer" title="Column setting" direction="rtl" :size="300">
    </el-drawer>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import JJTableSearch from './JJTableSearch.vue'

export default defineComponent({
  name: 'JJTable',
  components: { JJTableSearch },
  props: ['tableOptions', 'tableData'],
  emits: ['addHandle', 'delHandle'],
  data() {
    return {
      showSearch: false,
      showColumnSetting: false,
      selectedRows: []
    }
  },
  methods: {
    selectionChangeHandle(val) {
      this.selectedRows = val
    }
  }
})
</script>

<style lang="scss">
.JJTable {
  .TableSearchContainer {
    margin: calc(var(--u-gap) * 1.4) 0;
  }

  .TableContainer {
    background-color: var(--c-bg);

    .OptionArea {
      display: flex;
      padding: var(--u-gap);

      .DataOptions {
        flex-grow: 1;

        .el-button {
          line-height: 28px;
          padding: 0 8px;
          border-radius: 0;
        }
      }

      .TableOptions {
        flex-shrink: 0;

        .el-button {
          padding: 6.5px;
        }
      }
    }

    .el-table {
      td,
      th {
        padding: var(--u-gap) 0;
      }
    }
  }

  .TablePagination {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--u-gap);
  }

  .ColumnSettingDrawer {
    .el-drawer__header {
      padding: 16px 8px 0 8px;
    }
  }
}
</style>
